// 6个大屏导航组件
<template>
  <div class="container">
    <div class="timeBox">
      <!-- <iframe
      id="tianqi"
      scrolling="no"
      frameborder="0"
      allowtransparency="true"
      src="http://i.tianqi.com/index.php?c=code&a=getcode&id=34&h=25&w=280"
    >
    </iframe> -->
      <div id="tianqi">
        <span class="weatherCity">{{ weatherCity }}</span>

        &nbsp;

        <span>{{ weatherData.low + "-" + weatherData.high }}</span>

        &nbsp;

        <span>{{ weatherData.fengxiang }}</span>

        &nbsp;

        <span>{{ weatherData.type }}</span>
      </div>
      <div class="newtime">
        <span class="small">{{ smallTime }}</span>
        <span class="biger">{{ bigtTime }}</span>
      </div>
    </div>
    <div class="top"></div>
    <div class="left_system">
      <p>火星村土地</p>
      <p>智慧管理系统</p>
    </div>
    <div class="right_system">
      <p>火星村数字</p>
      <p>资源大脑</p>
    </div>
    <div class="middle">
      <div class="di_out">
        <img src="../../assets/screen/index/di_out.png" alt="" />
      </div>
      <div class="di">
        <img src="../../assets/screen/index/di.png" alt="" />
      </div>
      <!-- 中间五个球 -->
      <div>
        <div class="cmzl">村民治理</div>
        <div class="xccy">乡村产业</div>
        <div class="xcyj">乡村宜居</div>
        <div class="xctd">乡村土地</div>
        <div class="cmhx">村民画像</div>
      </div>
    </div>
    <div class="bottom">
      <div class="mlxc">
        <img src="../../assets/screen/index/mlxc.png" alt="" />
      </div>
      <div class="ball">
        <div class="shm">
          <img src="../../assets/screen/index/shenghuo.png" alt="" />
          <p>生活美</p>
        </div>
        <div class="stm">
          <img src="../../assets/screen/index/shengtai.png" alt="" />
          <p>生态美</p>
        </div>
        <div class="xcm">
          <img src="../../assets/screen/index/xiangcun.png" alt="" />
          <p>乡村美</p>
        </div>
        <div class="dwm">
          <img src="../../assets/screen/index/duiwu.png" alt="" />
          <p>队伍美</p>
        </div>
        <div class="cym">
          <img src="../../assets/screen/index/chanye.png" alt="" />
          <p>产业美</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from "@/api/screen/screen.js";
// 全局大屏1920*1080自适配
import "../../utils/screen/common";
import $ from 'jquery'
export default {
  data() {
    return {
      timer: "", //控制定时器
      timer: "", // 时分秒
      smallTime: "",
      bigtTime: "", // 获取当前时间
      weatherCity: "杭州", // 当前城市
      weatherData: "",
    };
  },
  methods: {
    hideShow() {
      this.timer = setInterval(() => {
        $(".mlxc").fadeOut(3000, function () {
          $(".mlxc").fadeIn(5000);
        });
      }, 0.1);
    },
    getWeather() {
        get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.weatherCity)
        .then((res) => {
            console.log(res)
          const result = res.data;
          let todayWeather = result.forecast[0];
          todayWeather.low = todayWeather.low.slice(2, 6);
          todayWeather.high = todayWeather.high.slice(2, 6);
          this.weatherData = todayWeather;
        });
    },
    appendZero(obj) {
      if (obj < 10) {
        return "0" + obj;
      } else {
        return obj;
      }
    },
    getSmallTime() {
      var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
      this.timer = setInterval(function () {
        const date = new Date();
        _this.smallTime = //修改数据date
          _this.appendZero(date.getHours()) +
          ":" +
          _this.appendZero(date.getMinutes()) +
          ":" +
          _this.appendZero(date.getSeconds());
      }, 1000);
    },

    getBigtime() {
      var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
      let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      const date = new Date();
      let wk = date.getDay();
      let week = weeks[wk];
      _this.bigtTime =
        date.getFullYear() +
        "年" +
        (date.getMonth() + 1) +
        "月" +
        date.getDate() +
        "日" +
        " " +
        week;
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.hideShow();
    this.getSmallTime();
    this.getBigtime();
    this.getWeather();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
};
</script>


<style lang="scss" scoped>
@import url(../../style/reset.css);

.container {
  width: 1920px;
  height: 1080px;
  background: url(../../assets/screen/index/Bg.png);
  position:relative;
}
.top {
  position: absolute;
  left: 300px;
  width: 100%;
  height: 113px;
  background: url(../../assets/screen/index/topNav.png) no-repeat;
}
.middle {
  position: absolute;
  top: 300px;
  left: 530px;
  width: 867px;
  height: 256px;
}
.di_out {
  position: absolute;
  top: 0;
  z-index: 999;
}
.di {
  position: absolute;
  top: -230px;
  left: 140px;
  animation: rotate 40s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.left_system,
.right_system {
  position: absolute;
  top: 300px;
  width: 290px;
  height: 300px;
  cursor: pointer;
  text-align: center;
  font-size: 30px;
  color: #00eaff;
}
.left_system {
  left: 100px;
  background: url(../../assets/screen/index/mana.png) no-repeat 0 50px;
}
.right_system {
  right: 100px;
  background: url(../../assets/screen/index/mind.png) no-repeat 0 50px;
}

.cmzl {
  position: absolute;
  z-index: 9999;
  top: 120px;
  left: -20px;
  width: 100px;
  height: 100px;
  font-family: SourceHanSansCN-Bold;
  font-size: 24px;
  background: url(../../assets/screen/index/circle.png) no-repeat;
  background-size: 100% 100%;
  font-weight: 600;
  color: #fff;
  line-height: 228px;
  cursor: pointer;
}
.xccy {
  position: absolute;
  z-index: 9999;
  top: 110px;
  left: 350px;
  width: 150px;
  height: 150px;
  font-family: SourceHanSansCN-Bold;
  font-size: 24px;
  background: url(../../assets/screen/index/circle.png) no-repeat;
  background-size: 100% 100%;
  font-weight: 600;
  color: #fff;
  line-height: 328px;
  text-align: center;
  cursor: pointer;
}
.xcyj {
  position: absolute;
  z-index: 9999;
  top: 70px;
  right: 10px;
  width: 100px;
  height: 100px;
  font-family: SourceHanSansCN-Bold;
  font-size: 24px;
  background: url(../../assets/screen/index/circle.png) no-repeat;
  background-size: 100% 100%;
  font-weight: 600;
  color: #fff;
  line-height: 248px;
  cursor: pointer;
}
.xctd {
  position: absolute;
  z-index: 9999;
  top: 60px;
  left: 140px;
  width: 100px;
  height: 100px;
  font-family: SourceHanSansCN-Bold;
  font-size: 20px;
  background: url(../../assets/screen/index/circle.png) no-repeat 8px 35px;
  background-size: 70px 70px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.cmhx {
  position: absolute;
  z-index: 9999;
  top: 0px;
  right: 140px;
  width: 100px;
  height: 100px;
  font-family: SourceHanSansCN-Bold;
  font-size: 20px;
  background: url(../../assets/screen/index/circle.png) no-repeat 8px 35px;
  background-size: 70px 70px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

.mlxc {
  position: absolute;
  bottom: 0;
}
.shm,
.stm,
.xcm,
.dwm,
.cym {
  position: absolute;
  bottom: 150px;
  left: 300px;
  width: 150px;
  height: 150px;
  cursor: pointer;
  background: url(../../assets/screen/index/ball_out.png) no-repeat;
}
.stm {
  bottom: 220px;
  left: 580px;
}
.xcm {
  bottom: 210px;
  left: 880px;
}
.dwm {
  bottom: 190px;
  left: 1180px;
}
.cym {
  bottom: 170px;
  left: 1450px;
}
.stm img,
.shm img {
  position: relative;
  top: 55px;
  left: 47px;
}
.xcm img,
.dwm img,
.cym img {
  position: relative;
  top: 50px;
  left: 55px;
}

.stm p,
.shm p,
.xcm p,
.dwm p,
.cym p {
  color: #fff;
  line-height: 220px;
  width: 100%;
  font-size: 24px;
  text-align: center;
}
.timeBox {
  width: 100%;
}
.newtime {
  position: absolute;
  right: 50px;
  top: 10px;
}
.small {
  color: #fff446;
  font-family: DS-Digital-Bold;
  letter-spacing: 0px;
  font-size: 36px;
  margin-right: 10px;
  font-weight: 500;
}
.biger {
  color: #fff;
}
#tianqi {
  position: absolute;
  left: 10px;
  color: #fff;
  height: 30px;
  padding: 20px;
  top: 10px;
}

#tianqi {
  text-indent: 1.8em;
}
#tianqi span:nth-child(1) {
  display: inline-block;
  font-size: 17px;
  color: skyblue;
  background: url(../../assets/screen/index/location.png) no-repeat -2px;
}
#tianqi span:nth-child(4) {
  color: #fff446;
}
</style>